/**
 * Created by Administrator on 2017/9/23.
 */
$(function(){

    //搜索框里的数据
    $("#search").find("input").on("focus", function(){
        $(this).val("");
    })

    //全部商品列表悬停时出现下拉列表
    $("#nav>ul>li").eq(0).on("mouseenter", function(){
        $(this).children("ul").css("display", "block")
    })
    //鼠标出去时列表消失
    $("#nav>ul>li").eq(0).on("mouseleave", function(){
        $(this).children("ul").css("display", "none");
    })


    //全部商品列表里的三级列表
    $("#shop_list>li").on("mouseenter", function(){
        $(this).css("border", "1px solid #ff5c00").css("color", "#ff5c00").children("div").css("display", "block").end().siblings().children("div").css("display", "none");
    })
    $("#shop_list>li").on("mouseleave", function(){
        $(this).css("border", "0").css("color", "#888").children("div").css("display", "none");
    })

    $("#shop_list").find("a").on("mouseenter", function(){
        $(this).css("color", "#ff5c00");
    })
    $("#shop_list").find("a").on("mouseleave", function(){
        $(this).css("color", "#888");
    })


    //放大镜
   function getStyle(obj,attr){
       if(window.getComputedStyle){
           return parseInt(window.getComputedStyle(obj,null)[attr]);
       }
       return parseInt(obj.currentStyle[attr]);
   }

   var bigArea = document.getElementById('bigArea');//大区域
    var bigImg = document.getElementById('bigImg');//大图片
    var middleArea = document.getElementById('middleArea');//小区域
    var middleImg = document.getElementsByClassName('middleImg')[0];//小图
    var oBox = document.getElementsByClassName('jqzoon')[0];

    //完成等比例
    middleArea.style.width = 200 + "px";
    middleArea.style.height = 200 + "px";
    var oScale =2.345
    //鼠标进入事件
    middleImg.onmousemove = function (evt) {

        var e = evt || window.event;
        //让小区域显示，并且大区域显示
        middleArea.style.display = "block";
        bigArea.style.display = "block";
        var x = e.clientX - oBox.offsetLeft - middleArea.offsetWidth / 2;
        var y = e.clientY - oBox.offsetTop - middleArea.offsetHeight / 2;

        if(x<=0){
            x=0;
        }
        if(x>=middleImg.offsetWidth-middleArea.offsetWidth){
            x=middleImg.offsetWidth-middleArea.offsetWidth;

        }
        if(y<=0){
            y=0;
        }
        if(y>=middleImg.offsetHeight-middleArea.offsetHeight){
            y = middleImg.offsetHeight-middleArea.offsetHeight;
        }
        middleArea.style.top = y + "px";

        middleArea.style.left = x + "px";
        console.log(y,x);
        //小区域往左 <---，大图就需要往右边  --->
        bigImg.style.left = -x * oScale + "px";
        bigImg.style.top = -y * oScale + "px";
        console.log(x*oScale);

    }

    middleImg.onmouseleave=function () {
        middleArea.style.display = "none";
        bigArea.style.display = "none";
    }

    //用json向页面中填入数据
    $.ajax({
        "url":"../json/homepage.json",
        "success":function(res){
            console.log(res);

            //设置首页和详情页面的连接
            var arr = window.location.href;
            if(arr.indexOf("&")!=-1){
                var arr1 = arr.split("&")[1];
                if(arr1.indexOf("=")!=-1){
                    var arr2 = arr1.split("=")[1];

                    $("#h1").text(res[arr2].title[0].h1).siblings("h3").children("span").text(res[arr2].title[1].span);
                    //设置初始页面时，商品展示图片默认为第一个
                    $(".jqzoon").children("img").attr("src",res[arr2].bigImg[0].bigImg).siblings("#bigArea").children("img").attr("src",res[arr2].bigImg[0].bigImg);
                    //像详情页页面中添加商品详情
                    $(".specImg>li").each(function(index,ele){
                        $(this).children("img").attr("src",res[arr2].smallImg[index].smallImg);

                        //展示商品出现
                        $(this).children("img").on("click",function(){
                            $(".jqzoon").children("img").attr("src",res[arr2].bigImg[index].bigImg).siblings("#bigArea").children("img").attr("src",res[arr2].bigImg[index].bigImg);

                        })

                        //将此商品详情的各种信息添加到cookie中去
                        var arrObj = [];
                        var str = $.cookie("shopThing");
                        //当点击加入购物车时，将商品添加到购物车中

                        $("#shop_car>a").on("click",function(){

                            //将选中的商品存入购物车中
                            if(str){
                                var strObj = JSON.parse(str);
                                arrObj = strObj;

                            }

                            //接收需要传入到cookie中的内容
                            var userObj = {};
                            userObj = {
                                "shopImg":res[arr2].smallImg[index].smallImg,
                                "h1":res[arr2].title[0].h1,
                                "doll":res[arr2].title[1].span,
                                "number":$("#num").val()
                            }
                            var date = new Date();
                            date.setDate(date.getDate()+10);

                            arrObj.push(userObj);
                            console.log(arrObj);
                            $.cookie("shopThing",JSON.stringify(arrObj),{expires:30});
                        })

                        console.log($.cookie("shopThing"));

                    })
                }
            }
        }
    })

    //设置选择商品的件数
    $("#top_icon").on("click",function(){
        var count = parseInt($("#num").val());
        $("#num").val(count+1);
    })

    $("#botton_icon").on("click",function(){
        var count = parseInt($("#num").val());
        $("#num").val(count-1);
        if(count<=0){
            $("#num").val(0);
        }
    })

})